/* 灵曜页面样式 - 星空主题 */
.lingyao-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  padding-bottom: 100px;
}

/* 顶部个人信息区 - 灵曜主题 */
.profile-header {
  position: relative;
  background: linear-gradient(135deg, #8B7D6B 0%, #D2B48C 50%, #F4A460 100%);
  padding: 40px 20px 30px;
  margin-bottom: 20px;
  overflow: hidden;

  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;

    .stars {
      position: absolute;
      width: 100%;
      height: 100%;

      .star {
        position: absolute;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        animation: twinkle 2s infinite ease-in-out;

        &.star-1 {
          width: 4px;
          height: 4px;
          top: 20%;
          left: 15%;
          animation-delay: 0s;
        }

        &.star-2 {
          width: 3px;
          height: 3px;
          top: 30%;
          right: 20%;
          animation-delay: 0.5s;
        }

        &.star-3 {
          width: 5px;
          height: 5px;
          top: 60%;
          left: 80%;
          animation-delay: 1s;
        }

        &.star-4 {
          width: 2px;
          height: 2px;
          top: 70%;
          left: 10%;
          animation-delay: 1.5s;
        }

        &.star-5 {
          width: 4px;
          height: 4px;
          top: 40%;
          left: 60%;
          animation-delay: 2s;
        }
      }
    }
  }

  .profile-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 8px 0;

    /* 头像区域 - 视觉第一锚点 */
    .avatar-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 12px;
    }

    .avatar-section {
      position: relative;
      cursor: pointer;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.95);
      }

      .user-avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0.5);
        box-shadow: 
          0 6px 18px rgba(0, 0, 0, 0.2),
          0 3px 8px rgba(139, 125, 107, 0.3);
        transition: all 0.3s ease;
        position: relative;
      }

      .avatar-overlay {
        position: absolute;
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.3s ease;

        .camera-icon {
          font-size: 20px;
          filter: grayscale(1) brightness(2);
        }
      }

      &:active .avatar-overlay {
        opacity: 1;
        background: rgba(0, 0, 0, 0.6);
      }
    }

    /* 身份信息区域 - 主角区域 */
    .identity-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 10px;

      .nickname-container {
        display: flex;
        justify-content: center;
        width: 100%;

        .main-nickname {
          font-size: 22px;
          font-weight: 700;
          color: #FFFFFF;
          background: transparent;
          border: none;
          text-align: center;
          text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
          width: 100%;
          max-width: 200px;
          transition: all 0.3s ease;

          &:focus {
            outline: none;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
          }

          &::placeholder {
            color: rgba(255, 255, 255, 0.5);
            font-weight: 400;
          }
        }
      }

    }

    /* 个性签名区域 - 次要信息 */
    .signature-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      max-width: 200px;
      width: 100%;

      .signature-text {
        width: 100%;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.7);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 6px 10px;
        text-align: center;
        line-height: 1.2;
        backdrop-filter: blur(3px);
        transition: all 0.3s ease;

        &:focus {
          background: rgba(255, 255, 255, 0.08);
          border-color: rgba(255, 255, 255, 0.15);
          outline: none;
        }

        &::placeholder {
          color: rgba(255, 255, 255, 0.35);
          font-style: italic;
        }
      }

      .signature-edit-hint {
        font-size: 8px;
        color: rgba(255, 255, 255, 0.4);
        opacity: 0.5;
      }
    }



  }
}


/* 徽章墙区域 */
.badges-section {
  background: #FFFFFF;
  margin: 0 16px 20px;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(139, 125, 107, 0.1);

  .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;

    .title-icon {
      font-size: 20px;
    }

    .title-text {
      font-size: 18px;
      font-weight: 600;
      color: #2C3E50;
      font-family: 'KaiTi', 'STKaiti', serif;
    }
  }

  .badges-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;

    .badge-item {
      text-align: center;
      padding: 12px 8px;
      border-radius: 12px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &.obtained {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border: 2px solid #8B7D6B;

        .badge-icon {
          opacity: 1;
          filter: none;
        }

        .badge-shine {
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
          animation: shine 3s infinite;
        }
      }

      &.locked {
        background: #f8f9fa;
        border: 2px solid #e9ecef;

        .badge-icon {
          opacity: 0.3;
          filter: grayscale(100%);
        }

        .badge-name {
          color: #adb5bd;
        }
      }

      &.empty-slot {
        background: #f8f9fa;
        border: 2px dashed #dee2e6;

        .empty-icon {
          font-size: 24px;
          color: #adb5bd;
          margin-bottom: 4px;
        }

        .badge-name {
          color: #adb5bd;
          font-size: 10px;
        }
      }

      &:active {
        transform: scale(0.95);
      }

      .badge-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 6px;
        transition: all 0.3s ease;
      }

      .badge-name {
        font-size: 10px;
        color: #2C3E50;
        font-weight: 500;
        line-height: 1.2;
      }
    }
  }
}

/* 数据统计区 */
.stats-section {
  background: #FFFFFF;
  margin: 0 16px 20px;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(139, 125, 107, 0.1);

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;

    .stat-item {
      text-align: center;
      padding: 16px 8px;
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
      border-radius: 12px;
      transition: all 0.3s ease;
      position: relative;
      border: 1px solid #e2e8f0;

      &:active {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        transform: scale(0.95);
      }

      .stat-icon {
        font-size: 20px;
        margin-bottom: 8px;
      }

      .stat-number {
        font-size: 20px;
        font-weight: 700;
        color: #8B7D6B;
        margin-bottom: 4px;
      }

      .stat-label {
        font-size: 11px;
        color: #64748b;
        font-weight: 500;
        line-height: 1.2;
      }
    }
  }
}

/* 内容 Tab 区 */
.content-tabs {
  background: #FFFFFF;
  margin: 0 16px 20px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(139, 125, 107, 0.1);
  overflow: hidden;

  .tab-header {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;

    .tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 8px;
      position: relative;
      transition: all 0.3s ease;

      &.active {
        background: #FFFFFF;
        
        .tab-text {
          color: #8B7D6B;
          font-weight: 600;
        }

        .tab-indicator {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 30px;
          height: 3px;
          background: linear-gradient(90deg, #8B7D6B, #D2B48C);
          border-radius: 2px;
        }
      }

      &:not(.active) {
        .tab-text {
          color: #64748b;
        }
      }

      &:active {
        background: #e2e8f0;
      }

      .tab-icon {
        font-size: 18px;
        margin-bottom: 4px;
      }

      .tab-text {
        font-size: 12px;
        font-weight: 500;
        transition: all 0.3s ease;
      }
    }
  }

  .tab-content {
    padding: 20px;

    .tab-panel {
      .posts-list,
      .novels-list,
      .favorites-list {
        .post-item,
        .novel-item,
        .favorite-item {
          display: flex;
          padding: 16px 0;
          border-bottom: 1px solid #f1f5f9;
          transition: all 0.3s ease;

          &:last-child {
            border-bottom: none;
          }

          &:active {
            background: #f8fafc;
            transform: scale(0.98);
          }

          .book-cover-small,
          .novel-cover {
            width: 50px;
            height: 70px;
            border-radius: 8px;
            margin-right: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            flex-shrink: 0;
          }

          .post-content,
          .novel-info,
          .favorite-content {
            flex: 1;

            .book-title,
            .novel-title {
              font-size: 16px;
              font-weight: 600;
              color: #1e293b;
              margin-bottom: 4px;
              line-height: 1.3;
            }

            .book-author {
              font-size: 13px;
              color: #64748b;
              margin-bottom: 8px;
            }

            .post-text {
              font-size: 14px;
              color: #333333; /* 书摘内容：深灰色，主要内容 */
              line-height: 1.5;
              margin-bottom: 8px;
              font-weight: 500;
              transition: all 0.3s ease;
              cursor: pointer;
              
              /* 未展开状态：限制行数 */
              &:not(.expanded) {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              
              /* 展开状态：显示全部内容 */
              &.expanded {
                display: block;
                overflow: visible;
                text-overflow: unset;
                -webkit-line-clamp: unset;
                -webkit-box-orient: unset;
              }
              
              &:active {
                opacity: 0.7;
              }
            }

            .post-thoughts {
              background: #f1f5f9;
              padding: 8px 12px;
              border-radius: 8px;
              margin-bottom: 8px;
              border-left: 3px solid #8B7D6B;

              .thoughts-text {
                font-size: 12px;
                color: #888888; /* 感想内容：浅灰色，次要内容 */
                line-height: 1.4;
                font-style: italic;
                transition: all 0.3s ease;
                cursor: pointer;
                
                /* 未展开状态：限制行数 */
                &:not(.expanded) {
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                
                /* 展开状态：显示全部内容 */
                &.expanded {
                  display: block;
                  overflow: visible;
                  text-overflow: unset;
                  -webkit-line-clamp: unset;
                  -webkit-box-orient: unset;
                }
                
                &:active {
                  opacity: 0.7;
                }
              }
            }

            .post-stats,
            .novel-stats {
              display: flex;
              gap: 12px;

              .stat-item {
                font-size: 11px;
                color: #64748b;
              }
            }

            .novel-meta {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 8px;

              .chapter-count {
                font-size: 12px;
                color: #64748b;
              }

              .novel-status {
                font-size: 11px;
                padding: 2px 6px;
                border-radius: 4px;
                font-weight: 500;

                &.ongoing {
                  background: #fef3c7;
                  color: #d97706;
                }

                &.completed {
                  background: #d1fae5;
                  color: #059669;
                }
              }
            }

            .favorite-source {
              display: flex;
              align-items: center;
              margin-bottom: 4px;

              .source-label {
                font-size: 11px;
                color: #64748b;
              }

              .source-user {
                font-size: 12px;
                color: #8B7D6B;
                font-weight: 500;
                margin-left: 4px;
              }
            }

            .favorite-time {
              font-size: 11px;
              color: #94a3b8;
            }
          }
        }
      }
    }
  }
}

/* 底部功能区 */
.bottom-functions {
  padding: 0 16px 20px;

  .function-card {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

    &.reward-center {
      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
      color: #FFFFFF;
      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);

      &:active {
        background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
        transform: scale(0.98);
      }

      .function-arrow {
        color: #FFFFFF;
      }
    }

    &.settings {
      background: #FFFFFF;
      color: #2C3E50;
      box-shadow: 0 4px 12px rgba(139, 125, 107, 0.1);
      border: 1px solid #e2e8f0;

      &:active {
        background: #f8fafc;
        transform: scale(0.98);
      }
    }

    .function-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      font-size: 24px;

      .reward-center & {
        background: rgba(255, 255, 255, 0.2);
      }

      .settings & {
        background: #f1f5f9;
      }
    }

    .function-content {
      flex: 1;

      .function-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 4px;
      }

      .function-desc {
        font-size: 12px;
        opacity: 0.8;
        line-height: 1.3;
      }
    }

    .function-arrow {
      font-size: 16px;
      opacity: 0.6;
    }
  }
}

/* 我的书单 */
.books-list {
  .book-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #F0F0F0;

    &:last-child {
      border-bottom: none;
    }

    .book-cover {
      width: 50px;
      height: 70px;
      border-radius: 4px;
      margin-right: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .book-info {
      flex: 1;

      .book-title {
        font-size: 16px;
        font-weight: 600;
        color: #2C3E50;
        margin-bottom: 4px;
        font-family: 'KaiTi', 'STKaiti', serif;
      }

      .book-author {
        font-size: 14px;
        color: #7F8C8D;
        margin-bottom: 8px;
      }

      .book-progress {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;

        .progress-bar {
          flex: 1;
          height: 4px;
          background: #E9ECEF;
          border-radius: 2px;
          overflow: hidden;

          .progress-fill {
            height: 100%;
            background: #8B7D6B;
            border-radius: 2px;
            transition: width 0.3s ease;
          }
        }

        .progress-text {
          font-size: 12px;
          color: #7F8C8D;
        }
      }

      .book-status {
        font-size: 12px;
        color: #8B7D6B;
      }
    }
  }
}

/* 我的徽章 */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;

  .badge-item {
    text-align: center;
    padding: 12px;
    background: #F8F9FA;
    border-radius: 8px;
    border: 1px solid #E9ECEF;
    transition: all 0.3s ease;

    &:active {
      background: #E9ECEF;
      transform: scale(0.95);
    }

    .badge-icon {
      width: 40px;
      height: 40px;
      margin-bottom: 8px;
    }

    .badge-name {
      font-size: 12px;
      color: #2C3E50;
      font-weight: 500;
    }
  }
}

/* 我的互动 */
.interactions-list {
  .interaction-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #F0F0F0;

    &:last-child {
      border-bottom: none;
    }

    .interaction-icon {
      width: 32px;
      height: 32px;
      background: #F8F9FA;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }

    .interaction-content {
      flex: 1;

      .interaction-text {
        font-size: 14px;
        color: #2C3E50;
        margin-bottom: 4px;
      }

      .interaction-time {
        font-size: 12px;
        color: #7F8C8D;
      }
    }
  }
}

/* 功能菜单 */
.menu-section {
  background: #FFFFFF;
  margin: 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(139, 125, 107, 0.1);

  .menu-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #F0F0F0;
    transition: all 0.3s ease;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      background: #F8F9FA;
    }

    .menu-icon {
      width: 40px;
      height: 40px;
      background: #F8F9FA;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }

    .menu-text {
      flex: 1;
      font-size: 16px;
      color: #2C3E50;

      &.logout-text {
        color: #FF6B6B;
      }
    }
  }
}

/* 徽章详情弹窗 */
.badge-detail-popup {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px;
  width: 300px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

  .popup-header {
    text-align: center;
    margin-bottom: 20px;

    .badge-large-icon {
      width: 80px;
      height: 80px;
      margin-bottom: 12px;
    }

    .badge-title {
      font-size: 20px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .badge-category {
      font-size: 12px;
      color: #8B7D6B;
      background: #f1f5f9;
      padding: 4px 8px;
      border-radius: 8px;
      display: inline-block;
    }
  }

  .popup-content {
    margin-bottom: 20px;

    .badge-description {
      font-size: 14px;
      color: #475569;
      line-height: 1.5;
      margin-bottom: 12px;
    }

    .badge-earned-time,
    .badge-requirement {
      font-size: 12px;
      color: #64748b;
      padding: 8px 12px;
      background: #f8fafc;
      border-radius: 8px;
      border-left: 3px solid #8B7D6B;
    }
  }

  .popup-footer {
    text-align: center;

    .close-btn {
      background: linear-gradient(135deg, #8B7D6B, #D2B48C);
      color: #FFFFFF;
      padding: 12px 24px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.95);
        background: linear-gradient(135deg, #7a6b5a, #c4a484);
      }
    }
  }
}

/* 动画效果 */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}
